<template>
  <div>
    <div class="userdashboard-container">
      <span class="little"></span>
      <div class="dashboard-text">用户管理</div>
    </div>
    <!-- 卡片区域 -->
    <el-card class="userbox-card">
      <div class="tittlebox">
        <!-- 总数 -->
        <div class="yellowbox">
          <div class="leftbox">
            <img src="../../img/user1.jpg" alt="" />
          </div>
          <div class="rightbox">
            <div class="sum">{{ state.sum }}</div>
            <div>总数</div>
          </div>
        </div>
        <span class="dashedbox"></span>
        <!-- 待认证 -->
        <div class="bluebox">
          <div class="leftbox">
            <img src="../../img/user2.jpg" alt="" />
          </div>
          <div class="rightbox">
            <div class="certified">{{ state.tobecertified }}</div>
            <div>待认证</div>
          </div>
        </div>
        <span class="dashedbox"></span>
        <!-- 认证中 -->
        <div class="bluebox">
          <div class="leftbox">
            <img src="../../images/renzhengzhong.jng.png" alt="" />
          </div>
          <div class="rightbox">
            <div class="certified">{{ state.authenticating }}</div>
            <div>认证中</div>
          </div>
        </div>
        <span class="dashedbox"></span>
        <!-- 已通过-->
        <div class="redbox">
          <div class="leftbox">
            <img src="../../img/user3.jpg" alt="" />
          </div>
          <div class="rightbox">
            <div class="process">{{ state.alreadyPassed }}</div>
            <div>已通过</div>
          </div>
        </div>
        <span class="dashedbox"></span>
        <!-- 已拒绝 -->
        <div class="greenbox">
          <div class="leftbox">
            <img src="../../img/user4.jpg" alt="" />
          </div>
          <div class="rightbox">
            <div class="noprocess">{{ state.rejected }}</div>
            <div>已拒绝</div>
          </div>
        </div>
      </div>
      <el-form :model="form" class="userinquire">
        <el-row>
          <el-col :span="6">
            <el-form-item>
              <el-input v-model="form.input" prefix-icon="el-icon-search" placeholder="企业名称">
                <i slot="suffix" class="el-icon-circle-close" @click="form.input = ''"></i>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item class="userstatus">
              <el-select v-model="form.dropdown" :value="form.dropdown">
                <el-option label="待认证" value="0"></el-option>
                <el-option label="认证中" value="3"></el-option>
                <el-option label="已通过" value="1"></el-option>
                <el-option label="已拒绝" value="2"></el-option>
                <el-option label="全部" value="0,1,2,3"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item class="userreserve">
              <button style="background: #216cff;color: #fff;cursor: pointer;" @click="submitForm" class="usersubmitForm">查询</button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!-- 产看详情弹窗 -->
      <enterprise ref="openchild" />
    </el-card>
    <el-card class="boxcard-bottom">
      <!-- 表格-->
      <div class="table-container">
        <el-table :data="tableData" style="width: 100%" :border="false" :show-overflow-tooltip="false" stripe
          class="bigtable">
          <el-table-column type="index" label="序号" width="70px" :index="indexMethod"></el-table-column>
          <el-table-column label="认证状态" prop="status">
            <template slot-scope="{ row }">
              <span :class="getStatusClass(row.authenticationState)">
                {{ getStatusText(row.authenticationState) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="用户名">
            <template slot-scope="{ row }">
              {{ row.username }}
            </template>
          </el-table-column>
          <el-table-column label="用户类型">
            <template slot-scope="{ row }">
              <span v-if="row.userType === 0">个人</span>
              <span v-if="row.userType === 1">企业</span>
            </template>
          </el-table-column>
          <el-table-column label="姓名/企业信息">
            <template slot-scope="{ row }">
              {{ row.qyName }}
            </template>
          </el-table-column>
          <el-table-column label="认证信息">
            <template slot-scope="{ row }">
              <i class="el-icon-share" style="margin-right: 4px; color: #216cff" v-if="row.userType === 1"></i>
              <span style="color: #216cff; cursor: pointer" @click="openwindow(row.id)"
                v-if="row.userType === 1">查看详情</span>
            </template>
          </el-table-column>
          <el-table-column label="申请时间">
            <template slot-scope="{ row }">
              {{ row.gmtApply | dateFormat }}
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <div style="display: flex;justify-content: center;">
                <div>
                  <a size="mini" type="primary" @click="handleEdit(scope.row, scope.row.id)" style="
                            display: inline-block;
                            width: 52px;
                            height: 24px;
                            color: #039757;
                            font-size: 16px;
                            font-weight: 500;
                            margin-right: 10px;
                            margin-left: 10px;
                            border: 1px solid #039757;
                            border-radius: 4px 4px 4px 4px;
                          "
                    v-if="(scope.row.authenticationState === 3 && scope.row.userType === 1) || (scope.row.authenticationState === 0 && scope.row.userType === 1)">通过</a>
                </div>
                <div>
                  <a size="mini" type="danger"
                    v-if="(scope.row.authenticationState === 3 && scope.row.userType === 1) || (scope.row.authenticationState === 0 && scope.row.userType === 1)"
                    @click="handreject(scope.row,
                      scope.row.id)" style="
                            display: inline-block;
                            width: 52px;
                            height: 24px;
                            color: #f39800;
                            font-size: 16px;
                            font-weight: 500;
                            margin-right: 10px;
                            border: 1px solid #f39800;
                            border-radius: 4px 4px 4px 4px;
                          ">驳回</a>
                </div>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-pagination background align="center" class="footerpage" layout="prev, pager, next"
        @size-change="handleSizeChange" @current-change="handleCurrentChange" :total="total" :current-page="currentPage"
        :page-size="pageSize">
      </el-pagination>
    </el-card>
    <!-- 通过审批意见弹窗 -->
    <el-dialog :visible.sync="dialogVisible" title="审批意见" style="width: 1000px;height: 500px;margin: 0 auto;">
      <div class="opinion-dialog-wrap">
        <div class="opinion-input-wrap">
          <el-input v-model="opinion" placeholder="请输入审批意见" type="textarea" :rows="3" />
        </div>
        <div class="opinion-btns-wrap">
          <el-button @click.native="dialogVisible = false">取消</el-button>
          <el-button style="background: #216cff;color: #fff;" @click.native="handrejectsolve">确定</el-button>
        </div>
      </div>
    </el-dialog>
    <!-- 驳回审批意见弹窗 -->
    <el-dialog :visible.sync="rejectdialogVisible" title="审批意见" style="width: 1000px;height: 500px;margin: 0 auto;">
      <div class="opinion-dialog-wrap">
        <div class="opinion-input-wrap">
          <el-input v-model="opiniontwo" placeholder="请输入审批意见" type="textarea" :rows="3" />
        </div>
        <div class="opinion-btns-wrap">
          <el-button @click.native="rejectdialogVisible = false">取消</el-button>
          <el-button style="background: #216cff;color: #fff;" @click.native="handleOkClick">确定</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
// import tableemployee from "@/views/settle";
import enterprise from "./components/enterprise.vue";
import {
  getuserList,
  usersStatus,
  getQyUserByUsername,
  certification,
  selectDetails,
} from "@/api/user";
import { logger } from "runjs/lib/common";
export default {
  name: "Dashboard",
  components: {
    enterprise,
  },
  data() {
    return {
      form: {
        input: "",
        status: "待认证",
        dropdown: '0,1,2,3',
      },
      tableData: [],
      userdata: [],
      currentPage: 1, // 当前页码
      total: 0, // 总条数
      pageSize: 5, // 每页的数据条数
      state: {
        sum: "",
        rejected: "",
        alreadyPassed: "",
        tobecertified: "",
        authenticating: ""
      },
      opinion: "同意",
      opiniontwo: '',
      dialogVisible: false,
      rejectdialogVisible: false,
      id: this.$store.state.user.userInfo.id,
      approvalInfo: "", //审核对象
      itemId: "",
      submitted: false,
    };
  },
  methods: {
    showDetail() {

    },
    submitForm() {
      // 点击模糊查询
      console.log(this.form.dropdown);

      getQyUserByUsername({
        page: this.currentPage,
        size: this.pageSize,
        qyName: this.form.input,
        stateId: this.form.dropdown,
      }).then((res) => {
        if (res.data.state === 20000) {
          const newdata = res.data.data.records;
          this.tableData = newdata;
        }
      });

    },
    getstatus() {
      countStatus().then((res) => {
      });
    },
    resetForm() {
      this.getuserList();
    },
    // 通过
    handleEdit(row, id) {
      if (row.userType === 0) {
        this.$message.error('该用户类型为个人，暂不需要操作')
      } else {
        // if (this.detailClicked) {
        // 执行“通过”操作
        selectDetails({ id }).then((res) => {
          this.approvalInfo = res.data.data;
        });
        this.dialogVisible = true;


      }
    },
    handreject(row, id) {
      if (row.userType === 0) {
        this.$message.error('该用户类型为个人，暂不需要操作')
      } else {
        selectDetails({ id }).then((res) => {
          this.approvalInfo = res.data.data;
        });
        this.rejectdialogVisible = true;


      }
    },
    openwindow(id) {
      this.detailClicked = true;
      this.$refs.openchild.openmessage(id);
    },
    // 动态class的方法,根据状态的不同显示不同的颜色
    getStatusClass(status) {
      switch (status) {
        case 0:
          return "blue-text";
        case 1:
          return "green-text";
        case 2:
          return "red-text";
        case 3:
          return "other"
        default:
          return "";
      }
    },
    getStatusText(status) {
      switch (status) {
        case 0:
          return "待认证";
        case 1:
          return "已通过";
        case 2:
          return "已拒绝";
        case 3:
          return "认证中"
        default:
          return "";
      }
    },
    //每页条数改变时触发 选择一页显示多少行
    handleSizeChange(val) {
      this.currentPage = 1;
      this.pageSize = val;
    },
    //当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getuserList();
    },
    // 获取用户列表
    getuserList() {
      getuserList({ page: this.currentPage, size: this.pageSize }).then(
        (res) => {
          this.total = res.data.data.total;
          this.tableData = res.data.data.records;
        }
      );
    },
    async usersStatus() {
      const res = await usersStatus();
      const { sum, rejected, alreadyPassed, toBeCertified, authenticating } = res.data.data;
      this.state.sum = sum;
      this.state.rejected = rejected;
      this.state.alreadyPassed = alreadyPassed;
      this.state.tobecertified = toBeCertified;
      this.state.authenticating = authenticating
    },
    handleOkClick() {
      if (this.opiniontwo.trim().length <= 0) {
        this.$message.warning('请先输入审核意见')
      } else {
        certification({
          adminId: this.id,
          // applicationId: this.itemId,
          approvalOpinion: this.opiniontwo,
          approvalStatus: 2,
          certificationId: this.approvalInfo.id,
        }).then((res) => {
          if (res.data.state === 20000) {
            this.$message.success("操作成功");
            this.rejectdialogVisible = false;
            this.getuserList();
            this.usersStatus();
          }
        });
      }
    },
    handrejectsolve() {
      if (this.opinion.trim().length <= 0) {
        this.$message.warning('请先输入审核意见')
      } else {
        certification({
          adminId: this.id,
          // applicationId: this.itemId,
          approvalOpinion: this.opinion,
          approvalStatus: 1,
          certificationId: this.approvalInfo.id,
        }).then((res) => {
          if (res.data.state === 20000) {
            this.$message.success("操作成功");
            this.dialogVisible = false
            this.getuserList();
            this.usersStatus();
          }
        });
      }
    },
  },
  created() {
    this.getuserList();
    this.usersStatus();
  },
  computed: {
    ...mapGetters(["name"]),
    indexMethod: function () {
      return (this.currentPage - 1) * (this.pageSize) + 1
    }

  },
};
</script>

<style lang="scss" >
.el-card__body {
  box-shadow: none;
}

.el-card {
  box-shadow: none;
  border: none;
}

.userdashboard-container {
  display: flex;
  padding: 10px 26px 26px 26px;

  .little {
    display: inline-block;
    width: 5px;
    height: 20px;
    background: #3064fc;
    margin-right: 6px;
  }

  .dashboard-text {
    font-size: 16px;
  }
}

.userbox-card {
  width: 99%;
  margin-top: -16px;
  height: 210px;
  margin-left: 8px;
  background: #ffffff;
  border-radius: 5px 5px 5px 5px;

  .tittlebox {
    display: flex;
    justify-content: space-between;

    .yellowbox,
    .bluebox,
    .redbox,
    .greenbox {
      display: flex;
      justify-content: center;
      align-items: center;

      .rightbox {
        :nth-child(2) {
          width: 48px;
          height: 16px;
          font-size: 16px;
          font-family: Microsoft YaHei;
          font-weight: bold;
          color: #2e2e2e;
          // line-height: 10px;
        }
      }

      .sum {
        font-weight: bold;
        color: #fabc00;
      }

      .certified {
        font-weight: bold;
        color: #1e6ceb;
      }

      .process {
        font-weight: bold;
        color: #f46e3e;
      }

      .noprocess {
        font-weight: bold;
        color: #31a952;
      }
    }
  }

  // 表单
  .userinquire {
    margin-top: 30px;
    margin-left: 16px;
  }

  // 认证状态
  .userstatus {
    margin-left: 50px;
  }

  // 查询
  .userreserve {
    margin-left: 20px;

    .usersubmitForm {
      width: 105px;
      height: 39px;
      border: 0;
      border-radius: 5px;
      background: #4777e8;
    }

    .resetForm {
      color: #fff;
      font-size: 15px;
      width: 105px;
      height: 40px;
      background: #7986a6;
    }
  }
}

.dashedbox {
  display: inline-block;
  margin-top: 34px;
  height: 20px;
  width: 1px;
  border: 1px solid #eaedf2;
  margin-right: 30px;
  margin-left: 2px;
  // width: 10px;
}

// 下方卡片区域
.boxcard-bottom {
  margin-top: 10px;
  width: 99%;
  max-height: 1200px;
  margin-left: 8px;
  background: #ffffff;
  border-radius: 5px 5px 5px 5px;
}
</style>
<!-- 表格样式css -->
<style>
.el-image-viewer__img {
  max-width: 90% !important;
  max-height: 90% !important;
}

/* .el-icon-circle-close{
  margin-right: 100px !important;
  margin-top: 30px !important;
} */
.table-container {
  /* padding: 60px; */
}

.table-container .el-table__header th {
  color: #216cff;
  font-size: 16px;
  background-color: #f3f6fb;
  /* border: 1px solid #e5e5e3; */
  text-align: center;
}

.table-container .el-table__body td {
  /* border: 1px solid #ddd; */
  text-align: center;
  font-weight: bold;
}

/* 三种状态的不同显示颜色 */
.blue-text {
  color: #2675c0;
}

.green-text {
  color: #31a952;
}

.red-text {
  color: #f46e3e;
}

.other {
  color: #15b0bc
}

.footerpage {
  margin-top: 40px;
}

.opinion-dialog-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.opinion-input-wrap {
  width: 100%;
  margin-bottom: 20px;
}

.opinion-label {
  width: 90px;
  text-align: right;
  margin-right: 10px;
}
</style>
